<template>
	<view>
		<uni-nav-bar statusBar :border='false' color="#fff" fixed :backgroundColor='backgroundColor'>
			<block slot="left">
				<view class="flex-row-flex-start">
					<image class="logo" src="/static/common/logo.png" mode=""></image>
					<view class="topTitle">
						猩猩地堡
					</view>

				</view>
			</block>
		</uni-nav-bar>
		<view class="topView" >
			<view class="flex-row-space-between" style="margin: 30rpx;;">
				<view class="searchView flex-row-flex-start flex1">
					<uni-icons style="margin-right: 10rpx;" type="search" color="#666666" size="24"></uni-icons>
					<input @confirm="loadData()" v-model="keyword" type="text" value="" placeholder="查路线/站点" />
					<!-- <view class="search">
						查路线/站点
					</view> -->
				</view>
				<view @click="loadData()" class="sou">
					搜索
				</view>
			</view>
			
			<view v-for="(item,index) in list" :key="index">
				<view @click="itemClick(item)" class="item flex-row-space-between">
					<view class="">
						<view class="title">
							{{item.line_name}}
						</view>
						<view class="detail">
							{{item.line_name}} / 首班车{{item.dispatch_time}}
						</view>
					</view>
					<view class="num">
						<text>{{item.station_count}}</text>
						<text style="font-size: 36rpx;margin-left: 6rpx;">站</text>
						
					</view>
					
				</view>
			</view>
			<view class="" style="height: 300rpx;">
				
			</view>
		</view>
		
		

	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from "vuex";
	import {
		lineList,
	} from '@/api/index.js'
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				keyword:'',
				list: [],
				title: "",
				backgroundColor: 'ffffff00',
				list: [],
				data: {}

			}
		},
		computed: {
			...mapState([
				'baseColor'
			]),
		},
		onPageScroll(e) {
			if (e.scrollTop > 20) {
				this.backgroundColor = "#BBD8F6"
			} else {
				this.backgroundColor = "#ffffff00"
			}
		},
		onShow() {
			this.loadData()
		},
		onLoad(e) {
			
		},
		//下拉刷新
		onPullDownRefresh() {


		},
		//加载更多
		onReachBottom() {

		},
		onPageScroll(e) {
			// if (e.scrollTop > 20) {
			// 	this.backgroundColor = "#FBF9FF"
			// } else {
			// 	this.backgroundColor = "#ffffff00"
			// }
		},
		methods: {
			itemClick(item){
				uni.navigateTo({
					url:'detail?id='+item.id
				})
			},
			loadData() {

				var data = {
					keyword:this.keyword,
					page: 1,
					page_size:999
				}
				lineList(data).then(res => {
					this.list = res.msg.data
				})
			},


		}
	}
</script>

<style lang="scss">
	.searchView{
		padding-left: 30rpx;
		
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.search{
		margin-left: 20rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #999999;
	}
	.sou{
		margin-left: 20rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
	}
	.item{
		margin: 32rpx;
		padding: 32rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.title{
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}
	.detail{
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
	}
	.num{
		margin-top: 20rpx;
		font-weight: 400;
		font-size: 48rpx;
		color: #FF672C;
	}
</style>